<template>
  <div class="account-config">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('configLazyLoad.intelligentQualityCheck.ruleManage')" name="ruleManage">
      </el-tab-pane>
      <el-tab-pane :label="$t('configLazyLoad.intelligentQualityCheck.markConfig')" name="markConfig">
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
  export default {
    name: 'qualityCheckConfig',
    data () {
      return {
        activeName: 'markConfig'
      }
    },
    methods: {
      handleClick (tab) {
        this.$router.push({path: '/index/config/intelligentQualityCheckConfig/' + tab.name})
      }
    },
    beforeMount () {
      this.activeName = 'ruleManage'
      this.$router.push({path: '/index/config/intelligentQualityCheckConfig/ruleManage'})
    },
    watch: {
      $route (to, form) {
        if (to.path.split('/')[3] === 'intelligentQualityCheckConfig' && (to.path.split('/')[4] === 'markConfig' || to.path.split('/')[4] === 'ruleManage')) {
          this.activeName = to.path.split('/')[4]
        }
      }
    },
    activated () {
      this.activeName = 'ruleManage'
      this.$router.push({path: '/index/config/intelligentQualityCheckConfig/ruleManage'})
    }
  }
</script>
